<template>
    <a-form-item>
                <template v-if="isArray(item.field)" >
                   
                    <a-form-item style="margin-bottom:0;" v-for="(f,i) in item.field" :key="i"  :style="formItemStyle">
                        <a-input-group compact>
  
                            <a-input v-if="item['component'][f]=='input'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false" 
                                :style="{ display: 'inline-block' }"
                                v-decorator="[f,{rules:item['rules'] && item['rules'][f]?item['rules'][f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />
                            <a-date-picker v-else-if="item['component'][f]=='date'"
                                :valueFormat="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'YYYY-MM-DD'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                v-decorator="[f,{rules:item['rules'] && item['rules'][f]?item['rules'][f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />
                            <a-month-picker v-else-if="item['component'][f]=='month'"
                                :valueFormat="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'YYYY-MM'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"                          
                                v-decorator="[f,{rules:item['rules'] && item['rules'][f]?item['rules'][f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />
                            <a-date-picker v-else-if="item['component'][f]=='time'"
                                show-time
                                :valueFormat="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'YYYY-MM-DD HH:mm:ss'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"   
                                v-decorator="[f,{rules:item['rules'] && item['rules'][f]?item['rules'][f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />

                            <LSelect  v-else-if="item.component[f]=='select'"
                                style="width: 100%"
                                :mode="item['mode'] && item['mode'][f]?item['mode']:'default'"
                                :options = "item['options'] && item['options'][f]?item['options'][f]:[]"
                                :dictCode = "item['dictCode'] && item['dictCode'][f]?item['dictCode'][f]:''"
                                :dictParam = "item['dictParam'] && item['dictParam'][f]?item['dictParam'][f]:''"
                                :parentSelect = "item['parentSelect'] && item['parentSelect'][f]?item['parentSelect'][f]:''"
                                :changeItem="changeItem" 
                                :replaceFields = "item['replaceFields'] && item['replaceFields'][f]?item['replaceFields'][f]:{}"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                :field= f
                                :form="form"
                                v-decorator="[f,{rules:item['rules'] && item['rules'][f]?item['rules'][f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />
                           
                             <a-time-picker style="width: 100%" show-time v-else-if="item.component[f]=='timePicker'"
                                :format="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'HH:mm:ss'"
                                :valueFormat="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'HH:mm:ss'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                v-decorator="[f,{rules:item['rules'] && item['rules'][f]?item['rules'][f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"/>

                            <a-input v-else 
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                :style="{ display: 'inline-block' }" 
                                v-decorator="[f,{rules:item['rules'] && item['rules'][f]?item['rules'][f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            /> 
                            
                        </a-input-group>
                    </a-form-item>
                   
                </template>
                
                <template v-else>
                    <a-input v-if="item.component=='input'" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        :addonAfter="item['addonAfter']"
                        :addonBefore="item['addonBefore']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>
                
                    <a-input-password v-else-if="item.component=='password'" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        :addonAfter="item['addonAfter']"
                        :addonBefore="item['addonBefore']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <a-input-search v-else-if="item.component=='inputSearch'" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"
                        @search="onSearch(item.field,form)"
                        enter-button
                        />


                    <a-textarea v-else-if="item.component=='textarea'" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        :rows="item['rows'] || 3"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <LSelect  v-else-if="item.component=='select'" 
                        style="width: 100%"
                        :mode="item['mode']"
                        :options = "item['options']"
                        :changeItem="changeItem" 
                        :parentSelect = "item['parentSelect']"
                        :dictCode = "item['dictCode']"
                        :dictParam = "item['dictParam']"
                        :disabled = "item['disabled']"
                        :field= "item['field']"
                        :replaceFields = "item['replaceFields']"
                        :form="form"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>
                

                    <LSearchSelect  style="width: 100%" v-else-if="item.component=='searchSelect'" 
                        :replaceFields = "item['replaceFields']"
                        :currentParam = "item['currentParam'] || item['field']"
                        :changeItem="changeItem" 
                        :parentSelect="item['parentSelect']"
                        :field="item['field']"
                        :param="item['param']"
                        :paramFormField="item['paramFormField']"
                        :url="item['url']"
                        :method = "item['method']"
                        :disabled = "item['disabled']"
                        :mode="item['mode']"
                        :form="form"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>
                    <LTreeSelect v-else-if="item.component=='treeSelect'" 
                        style="width: 100%"
                        :dictCode="item.dictCode"
                        :dictParam = "item['dictParam']"
                        :disabled="item['disabled']"
                        :treeCheckable = "item['treeCheckable']"
                        :showCheckedStrategy = "item['showCheckedStrategy']"
                        :treeCheckStrictly = "item['treeCheckStrictly']"
                        :multiple="item['multiple']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>
                

                    <a-input style="width: 100%" v-else-if="item.component=='iconSelect'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]">
                        <a-icon v-if="!item['disabled']" @click="handlerIconSelect(item.field,form)" slot="addonAfter" type="setting" /> 
                    </a-input>

                    <a-input-number style="width: 100%" v-else-if="item.component=='inputNumber'"
                        :min="item['min']" 
                        :max="item['max']" 
                        :precision="item['precision']" 
                        :step="item['step'] || 1"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>
                

                    <a-date-picker style="width: 100%" v-else-if="item.component=='date'"
                        :valueFormat="item['valueFormat'] || 'YYYY-MM-DD'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>
                    
                    <a-month-picker style="width: 100%" v-else-if="item.component=='month'"
                        :valueFormat="item['valueFormat'] || 'YYYY-MM'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <a-date-picker style="width: 100%" show-time v-else-if="item.component=='time'"
                        :valueFormat="item['valueFormat'] || 'YYYY-MM-DD HH:mm:ss'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <a-time-picker style="width: 100%" show-time v-else-if="item.component=='timePicker'"
                        :valueFormat="item['valueFormat'] || 'HH:mm:ss'"
                        :format="item['valueFormat'] || 'HH:mm:ss'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <a-switch v-else-if="item.component=='switch'" 
                        :checked-children="item['checkedChildren']" 
                        :un-checked-children="item['unCheckedChildren']" 
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']||false,valuePropName:'checked'}]"/>


                    <a-radio-group v-else-if="item.component=='radio'" 
                        :options="item['options']" 
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <a-rate v-else-if="item.component=='rate'" allow-half 
                        :count="item['count']"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <LImageUpload v-else-if="item.component=='imageUp'" 
                        :data="item['data']"
                        :field="item['field']"
                        :listType="item['listType']"
                        :disabled="item['disabled']"
                        :count="item['count']"
                        :form="form"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <LFileUpload v-else-if="item.component=='fileUp'" 
                        :data="item['data']"
                        :field = "item['field']"
                        :disabled = "item['disabled']"
                        :count = "item['count']"
                        :form="form"
                        v-decorator="[item.field,{rules:item['rules'],initialValue:item['initialValue']}]"/>

                    <Ltinymce v-else-if="item.component=='tinymce'" 
                        :form="form" 
                        :model="item['model']" 
                        :field="item['field']" 
                        :height="item['height']" 
                        :content="item['content']"/>

                    <Ltimeline v-else-if="item.component=='timeline'" 
                        :height="item['height']" 
                        :items="item['items']"
                        :itemField="item['itemField']"/>
                </template>
            </a-form-item>
</template>

<script>
import LSelect from '@/components/lt/LSelect.vue'
import LTreeSelect from '@/components/lt/LTreeSelect.vue'
import LImageUpload from '@/components/lt/LImageUpload.vue'
import LFileUpload from '@/components/lt/LFileUpload.vue'
import LSearchSelect from '@/components/lt/LSearchSelect.vue'
import Ltinymce from '@/components/lt/Ltinymce.vue'
import Ltimeline from '@/components/lt/Ltimeline.vue'
export default {
    name:'customFormItem',
    components:{LSelect,LTreeSelect,LImageUpload,LFileUpload,LSearchSelect,Ltinymce,Ltimeline},
    data(){
        return{
           //如果是多个组件在一起，动态样式
            formItemStyle:{display:'inline-block' }
        }
    },
    created(){
        if(this.item && Array.isArray(this.item.field)){
            this.formItemStyle={display:'inline-block',width:'calc('+(100/this.item.field.length)+'%)'} 
        }
        
    },
    props:{
        item:{
            type:Object,
            default:()=>{}
        },
        changeItem:{
            type:Object,
            default:()=>{}
        },
        form:{
            type:Object,
            default:()=>{} 
        },
       
        
    },
    methods:{
        handlerIconSelect(field,form){
          //  this.$parent.$parent.$parent.$parent.$parent.$refs.liconSelect.show(field,form) 
          this.getParent("LForm").$refs.liconSelect.show(field,form) 
        },
        isArray(obj){
            return Object.prototype.toString.call(obj) === '[object Array]';
        },
        isObject(obj) {
            return Object.prototype.toString.call(obj) === '[object Object]';
        },
        getParent(componentName){
            let parent = this.$parent;
            let name = this.$parent.$options.name;
            while (parent && (!name || componentName!=name)) {
                parent = parent.$parent;
                if (parent) name = parent.$options.name;
            }
            return parent;
        },
        onSearch(field,form){
            this.getParent("LForm").clickEventHandler(field,form)
            
        },
        onSearchKeyUp(field,form){
            form.setFieldsValue({[`${field}`]:''})
        }
    }
}

</script>

<style scoped>

::v-deep .ant-input{
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color:rgba(0,0,0, 0.8) !important;
}
::v-deep .ant-input-number{
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color:rgba(0,0,0, 0.8) !important;
}
::v-deep .ant-select-selection{
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color:rgba(0,0,0, 0.8) !important;
}


</style>
